<template>
  <div class="bg">
    <div class="main">
      <div class="header">
        <p>待处理</p>
      </div>
      <div class="data">
        <div class="left-main">
          <div class="top-box1">
            <div class="box1">
              <p class="num">10</p>
              <p>医嘱接收</p>
            </div>
            <div class="box2">
              <p class="num">10</p>
              <p>评估</p>
            </div>
            <div class="box3">
              <p class="num">10</p>
              <p>设备报警</p>
            </div>
          </div>
          <div class="mid-box1">
            <p>在住走势</p>
            <Echart1></Echart1>
          </div>
          <div class="bottom-box1">
            <p>退住走势</p>
            <Echart2></Echart2>
          </div>
        </div>
        <div class="right-main">
          <div class="top-box2">
            <p>{{ formattedDate }}</p>
          </div>
          <div class="mid-box2">
            <div class="header2">
              <p>今日动态</p>
            </div>
            <div class="bottom2">
              <div class="left3">
                <p>今日申请：3人</p>
                <p>今日请假：3人</p>
                <p>今日退住：13人</p>
              </div>
              <div class="right3">
                <p>今日入住：0人</p>
                <p>今日生日：5人</p>
                <p>今日缴费：23323元</p>
              </div>
            </div>
          </div>
          <div class="bottom-box2">
            <div class="header3-box1">
              <div class="header3-box1-title">
                <p>院内统计</p>
              </div>
              <div class="header3-box1-data">
                <div class="data-box1">
                  <p class="log">历史申请</p>
                  232人
                </div>
                <div class="data-box1">
                  <p class="log">历史入住</p>
                  34人
                </div>
                <div class="data-box1">
                  <p class="log">历史退住</p>
                  22人
                </div>
                <div class="data-box1">
                  <p class="log">历史死亡</p>
                  2人
                </div>
              </div>
            </div>
            <div class="header3-box2">
              <div class="header3-box2-title">
                <p>居家统计</p>
              </div>
              <div class="header3-box2-data">
                <div class="data-box2">
                  <p class="log">历史入住</p>
                  2人
                </div>
                <div class="data-box2">
                  <p class="log">历史退住</p>
                  5人
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from "vue";
import Echart1 from "../components/Eacher/Echart1.vue";
import Echart2 from "../components/Eacher/Echart2.vue";
import { test } from "../axios/Api/xsp_api";

/**
 *
 */
const formattedDate = ref("");

// 更新日期函数
const updateCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const weekday = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ][now.getDay()];
  formattedDate.value = `${year}-${month}-${day}  ${weekday}`;
};

// 使用onMounted钩子，在组件挂载时初始化日期，并设置定时器每秒更新日期
onMounted(() => {
  updateCurrentDate();
  setInterval(updateCurrentDate, 1000);
  tokenTest();
});

//token测试
const tokenTest = async () => {
  const {
    data: { msg },
  } = await test();
  console.log("肖赛澎来啦",msg,"肖赛澎打印的测试token");
};
</script>


<style scoped>
.bg {
  background-color: hwb(224 29% 8%);
  height: 850px;
  padding: 30px 30px;
}

.main {
  width: 100%;
  height: 100%;
  margin: auto;
}

.main .header {
  height: 10%;
  display: flex;
  align-items: center;
  /* background-color: blueviolet; */
}

.main .header p {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: white;
  margin-left: 15px;
}

.main .data {
  height: 90%;
  display: flex;
  justify-content: space-between;
}

.main .data .left-main {
  width: 60%;
  height: 100%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main .data .left-main .top-box1 {
  height: 18%;
  display: flex;
  justify-content: space-between;
}

.main .data .left-main .top-box1 .box1 {
  width: 30%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main .data .left-main .top-box1 .box1 .num {
  font-family: Arial, sans-serif;
  font-size: 60px;
  font-weight: 400;
  color: rgb(60, 84, 240);
}

.main .data .left-main .top-box1 .box2 {
  width: 30%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main .data .left-main .top-box1 .box2 .num {
  font-family: Arial, sans-serif;
  font-size: 60px;
  font-weight: 400;
  color: rgb(60, 84, 240);
}

.main .data .left-main .top-box1 .box3 {
  width: 30%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main .data .left-main .top-box1 .box3 .num {
  font-family: Arial, sans-serif;
  font-size: 60px;
  font-weight: 400;
  color: rgb(60, 84, 240);
}

.main .data .left-main .mid-box1 {
  height: 34%;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}
.main .data .left-main .mid-box1 p {
  color: rgb(80, 119, 238);
}

.main .data .left-main .bottom-box1 {
  height: 42%;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}

.main .data .left-main .bottom-box1 p {
  color: rgb(80, 119, 238);
}

.main .data .right-main {
  width: 38%;
  height: 100%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main .data .right-main .top-box2 {
  height: 9%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .data .right-main .top-box2 p {
  color: rgb(80, 119, 238);
}

.main .data .right-main .mid-box2 {
  height: 21%;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}

.main .data .right-main .mid-box2 .header2 {
  height: 30px;
  border-bottom: 1px solid rgb(47, 96, 221);
  color: rgb(47, 96, 221);
}

.main .data .right-main .mid-box2 .bottom2 {
  display: flex;
  margin-top: 10px;
  line-height: 25px;
}

.main .data .right-main .mid-box2 .bottom2 .left3 {
  width: 40%;
}

.main .data .right-main .mid-box2 .bottom2 .right3 {
  width: 60%;
}

.main .data .right-main .bottom-box2 {
  height: 67%;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}

.main .data .right-main .bottom-box2 .header3-box1 {
  height: 35%;
}

.main .data .right-main .bottom-box2 .header3-box1 .header3-box1-title {
  height: 30px;
  border-bottom: 1px solid rgb(47, 96, 221);
  color: rgb(47, 96, 221);
}

.main .data .right-main .bottom-box2 .header3-box1 .header3-box1-data {
  display: flex;
  flex-wrap: wrap;
}

.main
  .data
  .right-main
  .bottom-box2
  .header3-box1
  .header3-box1-data
  .data-box1 {
  width: 50%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
}

.main
  .data
  .right-main
  .bottom-box2
  .header3-box1
  .header3-box1-data
  .data-box1
  .log {
  background-color: rgb(83, 125, 231);
  color: white;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
}

.main .data .right-main .bottom-box2 .header3-box2 .header3-box2-title {
  height: 30px;
  border-bottom: 1px solid rgb(47, 96, 221);
  color: rgb(47, 96, 221);
}

.main .data .right-main .bottom-box2 .header3-box2 .header3-box2-data {
  display: flex;
  flex-wrap: wrap;
}

.main
  .data
  .right-main
  .bottom-box2
  .header3-box2
  .header3-box2-data
  .data-box2 {
  width: 50%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
}

.main
  .data
  .right-main
  .bottom-box2
  .header3-box2
  .header3-box2-data
  .data-box2
  .log {
  background-color: rgb(83, 125, 231);
  color: white;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
}
</style>